<template>
	<view class="viewBg">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker">
					<text class="cell-text">打卡类型</text>
					<text class="cell-detail">{{selectedValue}}</text>
				</view>
			</view>
		</view>
		<!-- 选择开始日期 -->
		<view class="selectDate">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">{{dateStart}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<button type="primary" @click="checkUserAttentce">查询打卡情况</button>

		<view class="lineH20"></view>
		<view class="attenceInfoView">{{attenceInfo}}</view>
		<!-- 列表 -->
		<!-- 时间轴 -->
		<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
			<view class="uni-timeline-item uni-timeline-first-item" v-if="listFirst !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view v-if="listFirst.type === '0' || listFirst.type === '3'">申请时间: {{listFirst.createTime}}</view>
					<view v-if="listFirst.type === '1' || listFirst.type === '2'">打卡时间: {{listFirst.createTime}}</view>
					<view v-if="listFirst.type === '0' || listFirst.type === '1' || listFirst.type === '2'">打卡位置: {{listFirst.address}}</view>
					<view v-if="listFirst.type === '2'">迟到事由: {{listFirst.reason}}</view>
					<view v-if="listFirst.type === '3'">请假时间: {{listFirst.leaveStart}}</view>
					<view v-if="listFirst.type === '3'">请假事由: {{listFirst.leaveTypeName +" " +listFirst.reason}}</view>
					<view v-if="listFirst.type === '0' || listFirst.type === '3'">审批时间: {{listFirst.examineTime}}</view>
					<view v-if="listFirst.type === '0' || listFirst.type === '3'">审批人员: {{listFirst.examineUserName}}</view>

				</view>
			</view>
			<view class="uni-timeline-item" v-for="(item,index) in list" :key="index" v-if="list !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view v-if="item.type === '0' || item.type === '3'">申请时间: {{item.createTime}}</view>
					<view v-if="item.type === '1' || item.type === '2'">打卡时间: {{item.createTime}}</view>
					<view v-if="item.type === '0' || item.type === '1' || item.type === '2'">打卡位置: {{item.address}}</view>
					<view v-if="item.type === '2'">迟到事由: {{item.reason}}</view>
					<view v-if="item.type === '3'">请假时间: {{item.leaveStart}}</view>
					<view v-if="item.type === '3'">请假事由: {{item.leaveTypeName +" " +item.reason}}</view>
					<view v-if="item.type === '0' || item.type === '3'">审批时间: {{item.examineTime}}</view>
					<view v-if="item.type === '0' || item.type === '3'">审批人员: {{item.examineUserName}}</view>
				</view>
			</view>
			<view class="uni-timeline-item uni-timeline-last-item" v-if="listLast !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view v-if="listLast.type === '0' || listLast.type === '3'">申请时间: {{listLast.createTime}}</view>
					<view v-if="listLast.type === '1' || listLast.type === '2'">打卡时间: {{listLast.createTime}}</view>
					<view v-if="listLast.type === '0' || listLast.type === '1' || listLast.type === '2'">打卡位置: {{listLast.address}}</view>
					<view v-if="listLast.type === '2'">迟到事由: {{listLast.reason}}</view>
					<view v-if="listLast.type === '3'">请假时间: {{listLast.leaveStart}}</view>
					<view v-if="listLast.type === '3'">请假事由: {{listLast.leaveTypeName +" " +listLast.reason}}</view>
					<view v-if="listLast.type === '0' || listLast.type === '3'">审批时间: {{listLast.examineTime}}</view>
					<view v-if="listLast.type === '0' || listLast.type === '3'">审批人员: {{listLast.examineUserName}}</view>
				</view>
			</view>
		</view>

		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"

	export default {
		components: {
			mpvuePicker,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray: [{
						label: '全部',
						value: 66
					},
					{
						label: "正常打卡",
						value: 1
					}, {
						label: "迟到打卡",
						value: 2
					}, {
						label: "请假",
						value: 3
					}
				],
				selectedValue: "全部",

				dateStart: currentDate,
				dateEnd: currentDate,

				attenceInfo: '', //打卡统计
				userId: '',
				//列表
				listFirst: null,
				list: null,
				listLast: null,

				pageNo: 1,
				showType: 66,
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(event) {
			if (event.userId) {
				this.userId = event.userId;
				console.log("userId:" + event.userId);
			}



		},
		onReachBottom() {
			this.pageNo++;
			this.getAttenceList();
		},
		methods: {
			showPicker() {
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];
				// this.pickerValueArray = ["病假","事假","婚假","丧假","产假","年休假"];
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				this.selectedValue = e.label;
				this.showType = e.value
			},
			bindStartDateChange: function(e) {
				this.dateStart = e.target.value

			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value;
			},
			checkUserAttentce() {
				this.listFirst = null;
				this.listLast = null;
				this.list = null;
				this.pageNo = 1;

				this.getAttenceStatistics();
				this.getAttenceList();
			},
			//获取打卡统计
			getAttenceStatistics() {
				var params = {
					pageNo: this.pageNo,
					pageSize: 10,
					startDate: this.dateStart,
					endDate: this.dateEnd,


				};
				if (this.userId) {
					params.userId = this.userId;
				}
				if (this.showType !== 66) {
					params.type = this.showType;
				}
				this.$http.get('ac/xagrid/appAttenceService/getAttenceStatisticsByUser', params).then((res) => {
					this.attenceInfo = res.data.info;
				})
			},
			//获取打卡记录
			getAttenceList() {
				var that = this;
				var params = {
					pageNo: this.pageNo,
					pageSize: 5,
					startDate: this.dateStart,
					endDate: this.dateEnd,

				};
				if (this.userId) {
					params.userId = this.userId;
				}
				if (this.showType !== 66) {
					params.type = this.showType;
				};
				this.$http.get('ac/xagrid/appAttenceService/getAttenceListByUser', params).then((res) => {
					if (that.pageNo > res.data.totalPage) {
						uni.showToast({
							icon: 'none',
							title: '已显示全部'
						})

						return;
					}
					var templist = that.list !== null ? that.list : new Array();
					if (that.listLast !== null) {
						templist.push(that.listLast);
					}

					templist = templist.concat(res.data.results);
					console.log('templist数组：' + JSON.stringify(templist));
					that.list = templist;
					if (that.list.length > 0 && that.listFirst === null) {
						that.listFirst = that.list.shift();
					}
					if (that.list.length == res.data.totalRecord - 2) {
						that.listLast = that.list.pop();
					}

				})
			},

			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}

		},

	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	button {
		margin: 30upx;
	}

	.attenceInfoView {
		display: flex;
		height: 30upx;
		margin: 20upx;
		align-items: center;
		justify-content: center;
	}
</style>
